<template>
  <el-dialog
    :title="!dataForm.id ? '新增' : '修改'"
    :close-on-click-modal="false"
    width="70%"
    :visible.sync="visible"
  >
    <el-form ref="dataForm" :model="dataForm" :rules="dataRule" label-width="80px" @keyup.enter.native="dataFormSubmit()">
      <el-row :gutter="40">
        <!-- 图标 -->
        <el-col :span="11">
          <el-form-item label="图标" prop="friendlinkico">
            <el-input v-model="dataForm.friendlinkimgname" :readonly="true" placeholder="自动转换100*30">
              <el-upload
                slot="append"
                :show-file-list="false"
                :on-success="successHandler"
                accept="image/png,image/gif,image/jpg,image/jpeg"
                :with-credentials="true"
                :action="uploadUrl"
              >
                <el-button size="mini" icon="el-icon-upload" type="primary">点击上传</el-button>
              </el-upload>
            </el-input>
            <br>
            <img :src="dataForm.friendlinkico" style="width:150px;height:45px;margin-top: 15px;margin-bottom: 15px">
            <el-alert title="上传的图片会缩放成150*45" class="padding-zero" :closable="false" type="success" effect="dark" />
          </el-form-item>
        </el-col>
        <!--明细-->
        <el-col :span="13">
          <el-form-item label="网站名称" prop="friendlinkname">
            <el-input v-model="dataForm.friendlinkname" placeholder="" />
          </el-form-item>
          <el-form-item label="网址" prop="friendlinkurl">
            <el-input v-model="dataForm.friendlinkurl" placeholder="">
              <template slot="prepend">Http://</template>
            </el-input>
          </el-form-item>
          <el-form-item label="排序号" prop="friendlinksort">
            <el-input v-model="dataForm.friendlinksort" placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col style="text-align: right;">
        <el-button size="mini" icon="el-icon-close" @click="visible = false">取消</el-button>
        <el-button size="mini" icon="el-icon-check" type="primary" @click="dataFormSubmit()">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      uploadUrl: this.$http.adornUrl(`/system/file/uploadFriendLink`),
      dataForm: {
        friendlinkid: 0,
        friendlinkico: '',
        friendlinkname: '',
        friendlinkurl: '',
        friendlinksort: '',
        dataflag: '',
        friendlinkimgname: '',
        friendlinkimgid: 0,
        createtime: ''
      },
      dataRule: {
        friendlinkico: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        friendlinkname: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        friendlinkurl: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        friendlinksort: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        dataflag: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        createtime: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.dataForm.friendlinkid = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        if (this.dataForm.friendlinkid) {
          this.$http({
            url: this.$http.adornUrl(`/friendlinks/info/${this.dataForm.friendlinkid}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.friendlinkico = data.friendLink.friendlinkico
              this.dataForm.friendlinkname = data.friendLink.friendlinkname
              this.dataForm.friendlinkurl = data.friendLink.friendlinkurl
              this.dataForm.friendlinksort = data.friendLink.friendlinksort
              this.dataForm.dataflag = data.friendLink.dataflag
              this.dataForm.createtime = data.friendLink.createtime
              this.dataForm.friendlinkimgname = data.friendLink.friendlinkimgname
              this.dataForm.friendlinkimgid = data.friendLink.friendlinkimgid
            }
          })
        }
      })
    },
    successHandler(response, file, fileList) {
      if (response.code === 0 && response.file) {
        this.dataForm.friendlinkico = this.$http.adornUrl(`/system/file/downloadFriendLink/${response.file.sysFileEncryptionName}`)
        this.dataForm.friendlinkimgname = response.file.sysFileDocumentname
        this.dataForm.friendlinkimgid = response.file.sysFileId
      } else {
        this.$message.error(response.msg)
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/friendlinks/${!this.dataForm.friendlinkid ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'friendlinkid': this.dataForm.friendlinkid || undefined,
              'friendlinkico': this.dataForm.friendlinkico,
              'friendlinkname': this.dataForm.friendlinkname,
              'friendlinkurl': this.dataForm.friendlinkurl,
              'friendlinksort': this.dataForm.friendlinksort,
              'friendlinkimgname': this.dataForm.friendlinkimgname,
              'friendlinkimgid': this.dataForm.friendlinkimgid
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
<style>
  .padding-zero{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
</style>
